import {MessageBlock} from "../MessageBlock/MessageBlock.js";

function messageWindow(cup) {
    this.coef = 1;
    // 大小调整标记
    this.fitFlag = false;
    // 滚动回调函数
    this.scrollCallBack = null;
    // 页列表
    this.subPageList = [];
    // 子块列表
    this.subBlockList = [];
    // 手动控制状态
    this.handleEvent = true;

    // 获得容器
    this.cup = cup;
    if(!this.cup) return false;

    this.__initStruct();

    // 获取框架
    this.MessageWindow = this.cup.querySelector(".MessageWindow");
    // 获取页列表
    this.messagePageList = this.cup.querySelector(".messagePageList");
}

messageWindow.prototype.__initStruct = function() {
    let templet = `
        <div class="MessageWindow">
            <div class="messagePageWindow">
                <div class="messagePageList">

                </div>
                <div class="frontShadow"></div>
                <div class="backShadow"></div>
                <div class="topShadow"></div>
                <div class="bottomShadow"></div>
            </div>
        </div>
    `;

    this.cup.innerHTML = templet;
}

// 添加页
messageWindow.prototype.addMessagePage = function() {
    let newPage = document.createElement("div");
    newPage.className = "messagePage";
    // 加入列表
    this.subPageList.push(newPage);
    // 加入 dom
    this.messagePageList.appendChild(newPage);
}

// 页添加块
messageWindow.prototype.addMessageBlockForPage = function(index, blockInf) {
    if(index >= this.subPageList.length)
        return false;

    let newBlock = document.createElement("div");
    newBlock.className = "messageBlockBox";

    let messageBlock = MessageBlock(newBlock);

    // 初始化
    messageBlock.setHref(blockInf.href || "https://www.bilibili.com");
    messageBlock.setImg(blockInf.img || "./img/test.png");
    messageBlock.setLabelTime(blockInf.labelTime || "Time");
    messageBlock.setLabelTitle(blockInf.labelTitle || "The Title For Message");
    messageBlock.setLabelFrom(blockInf.labelFrom || "From");
    // 加入列表
    this.subBlockList.push(messageBlock);
    // 加入 dom
    this.subPageList[index].appendChild(newBlock);

    if(this.fitFlag)
        this.setSize();
}

// 设置大小
messageWindow.prototype.setSize = function(coef) {
    this.coef = coef || this.coef;
    this.subBlockList.forEach((subBlock) => {
        subBlock.setSize(this.coef);
    });
    this.MessageWindow.style.setProperty("--controlLen", String(window.innerWidth * this.coef));
}

// 设置回调函数
messageWindow.prototype.setScrollCallBack = function(callBackFunc) {
    if(typeof callBackFunc !== "function")
        return false;
    this.scrollCallBack = callBackFunc;
}

// 执行回应函数
messageWindow.prototype.__runScrollRespon = function() {
    if(this.subPageList.length === 0)
        return false;

    let pageWide = this.subPageList[0].offsetWidth;
    let index = Math.trunc((this.messagePageList.scrollLeft + pageWide * 0.5) / pageWide);

    if(this.scrollCallBack === null || index >= this.subPageList.length)
        return;
    // 非手动控制 不执行回调函数
    if(!this.handleEvent)
        return;
    this.scrollCallBack(index);
}

// 切换手动
messageWindow.prototype.__sethandleEvent = function(sign) {
    this.handleEvent = sign;
}

// 滚动监听
messageWindow.prototype.addScrollRespon = function() {
    let timeout = null;
    let eventList = ["mousedown", "wheel", "DOMMouseScroll", "mousewheel", "touchmove"];

    eventList.forEach((event) => {
        let timeout = null;
        this.messagePageList.addEventListener(event, () => {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                this.__sethandleEvent(true);
            }, 100);
        });
    })

    this.messagePageList.addEventListener("scroll", () => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            this.__runScrollRespon();
        }, 100);
    });
}

// 设置选中页
messageWindow.prototype.setCheckedPage = function(index) {
    if(index >= this.subPageList.length)
        return false;

    // 切换为非手动状态
    this.__sethandleEvent(false);
    let pageWide = this.subPageList[0].offsetWidth;
    this.messagePageList.scrollTo({left: pageWide * index, behavior: "smooth"});
}

messageWindow.prototype.getCup = function() {
    return this.cup;
}

function createMessageWindow(cup) {
    return new messageWindow(cup);
}

export var MessageWindow = createMessageWindow;

// 根据实际情况修改

// function localSign() {
//     var messagePageList = document.querySelectorAll(".messagePage");
//     messagePageList.forEach((messagePage) => {
//         messagePage.scrollTop = 0;
//     });
// }
// setTimeout(() => {
//     localSign();
// }, 1000);